<template>
  <!-- <div class="gongtai"  v-if="(songdetail&&userinfo.user&&hotComments[1]?.user&&hotComments[2].user&&hotComments[3].user)"> -->
      <div class="gongtai"  v-if="(songdetail&&userinfo.user)">
      <div class="user">
          <div class="userleft">
              <img :src="userinfo?.user?.avatarUrl" alt="">
              <div>
                  <span>{{userinfo.user?.nickname}}</span>
                  <span>2019-9-12</span>
              </div>
              <div class="tags">
                  <span class="iconfont icon-yinlefuhao1"></span>
              </div>

          </div>
          <div class="userright">
              <span class="iconfont icon-gengduo"></span>
          </div>
      </div>
      <div class="music">
          <div class="musicleft">
            <img :src="songdetail?.al?.picUrl" alt="">
            <span v-if="isplay" class="iconfont icon-zanting" @click="paused"></span>
            <span v-if="!isplay"  class="iconfont icon-bofang" @click="play"></span>
          </div>
          <div class="musicright">
              <span>单曲</span>
              <span>{{songdetail?.al?.name}}</span>
              <span>{{hotComments[1]?.user?.nickname}}</span>

          </div>
      </div>
      <div class="comment">
          <span>
       {{userinfo?.content}}
  

          </span>
          <span>查看全部</span>
        
      </div>
      <div class="likeuser">
          <div class="likeleft">
                <img :src="hotComments[2]?.user?.avatarUrl" alt="">
          <img :src="hotComments[3]?.user?.avatarUrl" alt="">

          </div>
          <div class="likeright">
              <span class="iconfont icon-pinglun1"></span>
              <span class="iconfont icon-w_dianzan"></span><span> {{userinfo.likedCount}}</span>
          </div>
        
          
      </div>
  </div>
</template>

<script>
import {get} from '../../http/request.js'
import {mapState} from 'vuex'
export default {
    props:['id']
    ,
    data(){
       return{
           userinfo:null,
           songdetail:null,
           hotComments:null,
           isplay:false
       }
    },
    methods:{
   play(){
       this.$store.commit('changesongid',this.id)
       this.$store.commit('changepaused',true)
       this.isplay=true
   },
   paused(){
        
        this.$store.commit('changepaused',false)
       this.isplay=false

   }
    },
    computed:{
         ...mapState(['songid'])
    },
    watch:{
          songid(value){

              if(value!=this.id){

                  this.isplay=false

                  this.$store.commit('changepaused',true)

              }
              else{

                   this.isplay=true

                  this.$store.commit('changepaused',false)
              }

          }
    },
    mounted(){
        // console.log(this.id);
        // 获取歌曲评论
        get(`/comment/music?id=${this.id}&limit=1`).then(res=>{
            // console.log(res.data);
            this.userinfo=res.data.hotComments[0]
            this.hotComments=res.data.hotComments;

        })
        // 歌曲信息
        get(`/song/detail?ids=${this.id}`).then(res=>{

        // console.log('歌曲详情',res);

        this.songdetail=res.data.songs[0]

        console.log('songdetail',this.songdetail);
    })
  },
    }


</script>

<style lang="scss" scoped>
@import url(../../comman/css/dongtai.css);
</style>